import React, { Component } from 'react'
import {nanoid} from 'nanoid'
import './App.css'
import Header from './components/Header/Header'
import List from './components/List/List'
import Footer from './components/Footer/Footer'

export default class App extends Component {
    constructor(){
        super()
        this.addTodo = this.addTodo.bind(this)
    }
    state = {
        todos:[
            {
                id:1,
                title:'吃饭',
                isDone:true
            },
            {
                id:2,
                title:'睡觉',
                isDone:true
            }
        ]
    }
    /**
     * 添加todo
     * 子传父
     * 第一步：父组件定义方法
     */
    addTodo(title){
        console.log('App title: ', title);
        let todo = {
            // 0-9 a-z 26  36
            // id:Math.random().toString(36).slice(2),
            id:nanoid(),
            title,
            isDone:false
        }
        // 将todo放到todos中
        this.setState({
            todos:[todo,...this.state.todos]
        })
    }
    render() {
        let {todos} = this.state;
        return (
            <div className="todo-container">
                <div className="todo-wrap">
                    {/* 子传父第二步，将方法传递给子组件 */}
                    <Header addTodo={this.addTodo} todos={todos}/>
                    <List todos={todos}/>
                    <Footer todos={todos}/>
                </div>
            </div>
        )
    }
}
